<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram - Block on a Wedge</title>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings to match the hand-drawn look
        ctx.lineWidth = 2;
        ctx.font = "italic 20px 'Times New Roman'";
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineCap = 'round';

        // Helper function for drawing arrows
        function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Main Drawing ---

        // Parameters
        const ox = 100;
        const oy = 400;
        const alpha_deg = 25;
        const alpha_rad = alpha_deg * Math.PI / 180;
        const cos_a = Math.cos(alpha_rad);
        const sin_a = Math.sin(alpha_rad);

        // 1. Draw Ground
        const groundStartX = 20;
        const groundEndX = 580;
        ctx.beginPath();
        ctx.moveTo(groundStartX, oy);
        ctx.lineTo(groundEndX, oy);
        ctx.stroke();
        // Hatching marks
        ctx.lineWidth = 1.5;
        for (let i = groundStartX + 10; i < groundEndX; i += 20) {
            ctx.beginPath();
            ctx.moveTo(i, oy);
            ctx.lineTo(i - 10, oy + 10);
            ctx.stroke();
        }
        ctx.lineWidth = 2;

        // 2. Draw Wedge
        const wedgeBase = 400;
        const wedgeHeight = wedgeBase * Math.tan(alpha_rad);
        const wedgeV1 = { x: ox, y: oy };
        const wedgeV2 = { x: ox + wedgeBase, y: oy };
        const wedgeV3 = { x: ox + wedgeBase, y: oy - wedgeHeight };

        ctx.beginPath();
        ctx.moveTo(wedgeV1.x, wedgeV1.y);
        ctx.lineTo(wedgeV2.x, wedgeV2.y);
        ctx.lineTo(wedgeV3.x, wedgeV3.y);
        ctx.closePath();
        ctx.stroke();

        // Draw the small support-like triangle
        ctx.beginPath();
        ctx.moveTo(ox + 250, oy);
        ctx.lineTo(ox + 280, oy);
        ctx.lineTo(ox + 280, oy - 30);
        ctx.stroke();

        // 3. Draw Block
        const blockDist = 180; // distance from O along the slope to block center of base
        const blockW = 80;
        const blockH = 50;

        ctx.save();
        ctx.translate(ox, oy);
        ctx.rotate(-alpha_rad);
        ctx.strokeRect(blockDist - blockW / 2, -blockH, blockW, blockH);
        ctx.restore();

        // Coordinates for placing vectors
        const block_base_cx = ox + blockDist * cos_a;
        const block_base_cy = oy - blockDist * sin_a;
        const block_cm_x = block_base_cx - (blockH / 2) * sin_a;
        const block_cm_y = block_base_cy - (blockH / 2) * cos_a;

        // 4. Draw Forces and Accelerations on Block
        const vecLen = 80;

        // mg (gravity on block)
        drawArrow(ctx, block_cm_x, block_cm_y, block_cm_x, block_cm_y + vecLen);
        ctx.fillText("mg", block_cm_x + 5, block_cm_y + vecLen + 5);

        // N (normal force on block) - originating from the contact surface
        const N_end_x = block_base_cx - vecLen * sin_a;
        const N_end_y = block_base_cy - vecLen * cos_a;
        drawArrow(ctx, block_base_cx, block_base_cy, N_end_x, N_end_y);
        ctx.fillText("N", N_end_x - 30, N_end_y - 5);

        // ẍ (acceleration of block) - starting from top of block as in diagram
        const acc_start_x = ox + (blockDist - blockW/2 + 2) * cos_a - (blockH) * sin_a;
        const acc_start_y = oy - (blockDist - blockW/2 + 2) * sin_a - (blockH) * cos_a;
        drawArrow(ctx, acc_start_x, acc_start_y, acc_start_x + vecLen * cos_a, acc_start_y - vecLen * sin_a);
        ctx.fillText("x\u0308", acc_start_x + vecLen * cos_a, acc_start_y - vecLen * sin_a);

        // 5. Draw Forces and Accelerations on Wedge
        const wedge_cm_x = ox + wedgeBase * 0.65;
        const wedge_cm_y = oy - wedgeHeight * 0.35;

        // Mg (gravity on wedge)
        drawArrow(ctx, wedge_cm_x, wedge_cm_y, wedge_cm_x, wedge_cm_y + vecLen);
        ctx.fillText("Mg", wedge_cm_x + 5, wedge_cm_y + vecLen + 20);

        // N (reaction force from block on wedge)
        const N_wedge_start_x = ox + (wedgeBase * 0.7) * cos_a;
        const N_wedge_start_y = oy - (wedgeBase * 0.7) * sin_a;
        const N_wedge_end_x = N_wedge_start_x + (vecLen - 10) * sin_a;
        const N_wedge_end_y = N_wedge_start_y + (vecLen - 10) * cos_a;
        drawArrow(ctx, N_wedge_start_x, N_wedge_start_y, N_wedge_end_x, N_wedge_end_y);
        ctx.fillText("N", N_wedge_end_x, N_wedge_end_y + 15);

        // Ẍ (acceleration of wedge)
        const X_ddot_start_x = wedgeV3.x - 20;
        const X_ddot_start_y = wedgeV3.y + 60;
        drawArrow(ctx, X_ddot_start_x, X_ddot_start_y, X_ddot_start_x + vecLen + 20, X_ddot_start_y);
        ctx.fillText("X\u0308", X_ddot_start_x + (vecLen + 20) / 2 - 10, X_ddot_start_y - 15);

        // 6. Draw Coordinate Systems and Labels near Origin
        // Inertial X axis
        drawArrow(ctx, groundStartX, oy, groundEndX, oy);
        ctx.font = "italic 22px 'Times New Roman'";
        ctx.fillText("X", groundEndX + 10, oy + 8);
        ctx.font = "italic 20px 'Times New Roman'";

        // Tilted y-axis
        const y_axisLen = 80;
        const y_axis_end_x = ox - y_axisLen * sin_a;
        const y_axis_end_y = oy - y_axisLen * cos_a;
        drawArrow(ctx, ox, oy, y_axis_end_x, y_axis_end_y);
        ctx.fillText("y", y_axis_end_x - 20, y_axis_end_y);

        // Velocity vector ẋ on the incline
        const x_dot_len = 80;
        const x_dot_start_x = ox + 40 * cos_a;
        const x_dot_start_y = oy - 40 * sin_a;
        drawArrow(ctx, x_dot_start_x, x_dot_start_y, x_dot_start_x + x_dot_len * cos_a, x_dot_start_y - x_dot_len * sin_a);
        ctx.fillText("x\u0307", x_dot_start_x + 40 * cos_a - 10, x_dot_start_y - 40 * sin_a - 10);

        // Label Origin O
        ctx.fillText("O", ox - 25, oy + 25);

        // Angle α
        ctx.beginPath();
        ctx.arc(ox, oy, 40, -alpha_rad, 0);
        ctx.stroke();
        ctx.fillText("α", ox + 45, oy - 10);

        // 7. Add Figure Caption
        ctx.font = "18px 'Times New Roman'";
        ctx.fillText("Fig. 1.65.", canvas.width / 2 - 40, canvas.height - 20);

    </script>
</body>
</html>